<!DOCTYPE html>
<html>
<head>
    <style>
        img, div {
            display: inline-block;
            margin: 20px 20px;
            border: 2px solid black;
            width: 220px;
            height: 220px;
        }

        .png {
            background-image: url(../../custom/resources/green-checker.png);
            background-repeat: no-repeat;
            background-position: center;
        }

        .svg {
            background-image: url(resources/circle.svg);
        }

        .gradient {
            background-image: repeating-radial-gradient(at top left, red, blue 20px, red 40px);
        }
    </style>
</head>

<body onload="runAfterLayoutAndPaint(repaintTest, true);">
<div class="png"></div>
<div class="svg"></div>
<div class="gradient"></div>
<img src="resources/circle.svg"></img>

<script>var zoomCount = 3; window.shouldZoomOut = true;</script>
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<script src="../resources/testPageZoom.js"></script>

</body>
</html>
